.w1200 {
    width: 1200px;
    margin: 0 auto;
}

.w1140 {
    width: 910px;
    margin: 0 auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.underline {
    -webkit-transition: all .5s cubic-bezier(.02, .01, .47, 1);
    transition: all .5s cubic-bezier(.02, .01, .47, 1);
    position: relative;
}

.underline:before {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    left: 10px;
    height: 1px;
    background: currentColor;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
    transition: opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
    transition: transform .5s cubic-bezier(.02, .01, .47, 1), opacity .5s cubic-bezier(.02, .01, .47, 1);
    transition: transform .5s cubic-bezier(.02, .01, .47, 1), opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
}

.underline:hover:before {
    opacity: 1;
}

.underline.active:before {
    opacity: 1;
}

.underline:after {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    left: 10px;
    height: 1px;
    background: currentColor;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
    transition: opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
    transition: transform .5s cubic-bezier(.02, .01, .47, 1), opacity .5s cubic-bezier(.02, .01, .47, 1);
    transition: transform .5s cubic-bezier(.02, .01, .47, 1), opacity .5s cubic-bezier(.02, .01, .47, 1), -webkit-transform .5s cubic-bezier(.02, .01, .47, 1);
}

.underline:hover:after {
    opacity: 1;
}